<template>
  <div class="x-page">
    <ul class="page-ul">
      <li class="page-li" >总共{{allpage}}页</li>
      <li
        class="page-li"
        :class="{disabled:currentPage==1}"
        @click="currentChange(currentPage,'hpBtn')"
        v-if="allpage>5"
      >{{hpBtn}}</li>
      <li
        class="page-li"
        :class="{disabled:currentPage==1}"
        @click="currentChange(currentPage,'pre')"
      >{{preBtn}}</li>
      <li class="page-li" v-show="isPreShow">...</li>
      <li
        class="page-li"
        v-for="n in pages"
        :key="n"
        :class="{active:n == currentPage}"
        @click="currentChange(n,'goto')"
      >{{n}}</li>
      <li class="page-li" v-show="isNextShow">...</li>
      <li
        class="page-li"
        :class="{disabled:currentPage == allpage}"
        @click="currentChange(currentPage,'next')"
      >{{nextBtn}}</li>
      <li
        class="page-li"
        :class="{disabled:currentPage == allpage}"
        @click="currentChange(currentPage,'epBtn')"
        v-if="allpage>5"
      >{{epBtn}}</li>
      <li class="page-li" style="margin-left:20px;" v-if="allpage>5">
        <input type="text" v-model="pageNo">
      </li>
      <li
        v-if="allpage>5"
        class="page-li"
        style="background: #72edf5;color: #000;"
        @click="currentChange(null,'go')"
      >
        Go
      </li>
    </ul>
  </div>
</template>
<script>
export default {
  name: "xpage",
  data() {
    return {
      isPreShow: false,
      isNextShow: false,
      // currentPage: 1,
      pageNo:1
    };
  },
  props: {
    currentPage:{
      type:Number,
      default:1
    },
    pageSize: {
      type: Number,
      default: 0
    },
    allpage: {
      type: Number,
      default: 0
    },
    totalNum: {
      type: Boolean,
      default: false
    },
    hep: {
      type: Boolean,
      default: false
    },
    btnType: {
      type: Number,
      default: 0
    }
  },
  computed: {
    preBtn() {
      return this.btnType == 0 ? "<" : "上一页";
    },
    nextBtn() {
      return this.btnType == 0 ? ">" : "下一页";
    },
    hpBtn() {
      return this.btnType == 0 ? "<<" : "首页";
    },
    epBtn() {
      return this.btnType == 0 ? ">>" : "尾页";
    },
    pages() {
      let pag = [];
      if (this.allpage <= this.pageSize) {
        //总页数小于要显示的页数
        this.isPreShow = false; //省略号隐藏
        this.isNextShow = false; //省略号隐藏
        let number = this.allpage;
        while (number) {
          pag.unshift(number--);
        }
      } else {
        //总页数大于显示的页数
        this.isNextShow = true; //尾部显示省略号
        if (this.currentPage <= Math.ceil(this.pageSize / 2)) {
          //判断前几个
          this.isPreShow = false;
          let number = this.pageSize;
          while (number) {
            pag.unshift(number--);
          }
        } else if (
          this.currentPage <=
          this.allpage - Math.ceil(this.pageSize / 2)
        ) {
          //判断中间显示
          this.isPreShow = true;
          let start = parseInt(this.currentPage) - parseInt(Math.floor(this.pageSize / 2));
          let end = parseInt(this.currentPage) + parseInt(Math.floor(this.pageSize / 2));
          this.isNextShow = true;
          let number = start;
          while (number <= end) {
            pag.push(number++);
          }
        } else {
          //判断最后几个
          this.isNextShow = false;
          let number = this.allpage - this.pageSize;
          while (number <= this.allpage) {
            pag.push(number++);
          }
        }
      }
      return pag;
    }
  },
  methods: {
    currentChange(num, type) {
      switch (type) {
        case "pre":
          if (this.currentPage == 1) return;
          this.currentPage--;
          break;
        case "goto":
          if (this.currentPage == num) return;
          this.currentPage = num;
          break;
        case "next":
          if (this.currentPage == this.allpage) return;
          this.currentPage++;
          break;
        case "hpBtn":
          this.currentPage = 1;
          break;
        case "epBtn":
          this.currentPage = this.allpage;
          break;
        case "go":
          if(0<parseInt(this.pageNo) && parseInt(this.pageNo)<=parseInt(this.allpage)){
            this.currentPage =this.pageNo
          }else{
            return
          }
          break;
      }
      this.$emit("currentChange", this.currentPage);
    }
  }
};
</script>
<style lang="less" scoped="scoped">
.x-page {
  width: auto;
  height: 30px;
  ul.page-ul {
    width: auto;
    list-style: none;
    position: relative;
    border-radius: 4px;
    height: 30px;
    font-size: 0;
    cursor: pointer;
    li.page-li {
      display: inline-block;
      vertical-align: middle;
      min-width: 32px;
      line-height: 32px;
      color: #a3a3a3;
      text-align: center;
      font-size: 14px;
      border: 1px solid #a3a3a3;
      border-radius: 4px;
      margin: 0 4px;
      box-sizing: border-box;
      &:first-child {
        // border-left: 1px solid #00A2EE;
        margin-right: 20px;
        font-size: 18px;
      	border-top-left-radius: 4px;
        border-bottom-left-radius: 4px;
        border:0;
      }
      input{

        background: transparent;
        color: #fff;
        border: none;
        outline: none;
        width:30px;
      }
      // &:last-child {
      // 	border-top-right-radius: 4px;
      // 	border-bottom-right-radius: 4px;
      // }
      &.active {
        background: #72edf5;
        color: #000;
        border: 1px solid #72edf5;
      }
      &.disabled {
        cursor: not-allowed;
        background: rgba(255, 255, 255, 0.5);
        color: #cccccc;
      }
    }
  }
}
</style>
